<template>
<div class="aboutcon">
    <div class="abimg1"><img src="../../img/abimg1.jpg"></div>
    <div class="abcont1">
        <div class="abcont1-con wow animated fadeInUp">
            <h2Title title1='companyprofile' title2='萃元生物科技有限公司'></h2Title>
            <div class="abcont1-2 clearfix">
                    <div class="abcont1-2img"><img src="../../img/logo.png"></div>
                    <div class="abcont1-3">
                        <!-- <p class="tein48">{{description}}</p> -->
                        <p class="tein48">黑龙江萃元生物科技有限公司成立于2019年，坐落于美丽的冰城哈尔滨。是一家规模化从事紫苏全产业链的公司，立足于有机、绿色健康产业，以生物科技为主导，集紫苏技术研发、种子优化、标准化种植、精深加工、销售为一体的科技型企业。
公司在鹤岗投资5亿元，打造绿色旅游城市。拥有2000多亩紫苏茶种植示范基地，15余万亩有机种植基地，年加工紫苏籽1万吨的20多条现代化生产线。</p>
                    </div>
            </div>
        </div>
    </div>
        <p class="abp-sty1 con"></p>
        <div class="abcont2 con">
            <h2Title title1='Scope business' title2='业务范围'></h2Title>
            <p class="abp-sty2">平台在网上开展业务，可以实现产品展示，销售，在线支付一条龙服务 进行商户交流、客户信息管理、简单订单管理</p>
            <div class="abcont2-1">
                <div class="abcont2l">
                    <div class="abcimg1">
                        <i class="img iconimg1"></i>
                        <p>小程序</p>
                    </div>
                </div>
                <div class="abcont2c">
                    <div class="abcimg2">
                        <i class="img iconimg1"></i>
                        <p>抖音号</p>
                    </div>
                    <div class="abcimg3">
                        <i class="img iconimg1"></i>
                        <p>知乎</p>
                    </div>
                    <div class="abcimg4">
                        <i class="img iconimg1"></i>
                        <p>实体店经营</p>
                    </div>
                    <div class="abcimg5">
                        <i class="img iconimg1"></i>
                        <p>微信公众号</p>
                    </div>
                </div>
                <div class="abcont2r">
                    <div class="abcimg6">
                        <i class="img iconimg1"></i>
                        <p>APP开发</p>
                    </div>
                </div>
            </div>
        </div>
    <div class="abcont3">
        <div class="w1200 maau">
            <h2Title title1='Why did you choose us' title2='选择我们'></h2Title>
        <div class="abcont3-1">
            <div class="abcont3-con"><span class="fz48">12</span><span class="fz28">年</span><p class="psty2">建网经验</p></div>
            <div class="abcont3-con"><span class="fz48">24</span><span class="fz28">h</span><p class="psty2">售后服务</p></div>
            <div class="abcont3-con"><span class="fz48">400</span><span class="fz28">余</span><p class="psty2">技术人才</p></div>
            <div class="abcont3-con"><span class="fz48">60</span><span class="fz28">+</span><p class="psty2">服务城市</p></div>
            <div class="abcont3-con"><span class="fz48">72</span><span class="fz28">项</span><p class="psty2">技术标准</p></div>
        </div>
        </div>


    </div>
    <div class="abcont4 con wow animated fadeInDown">
         <h2Title title1='Enterprise Team' title2='企业团队'></h2Title>
         <div class="abcont4-con">
             <div class="img"><img src="../../img/abimg3.png"></div>
             <div class="abcont4-cont">
                 <div class="abcont4-cont1">
                 <p class="ab-tit5"><span>公司创始人 - OOOO</span></p>
                 <p class="ab-tit6">十多年专业项目工程经验</p>
                 <p class="ab-tit7">文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 文本介绍文本介绍文本介绍文本介绍 文本介绍文本介绍文本</p>
             </div>
             </div>
         </div>
         <div class="abcont4-con">
            <div class="abcont4-con2">
             <div class="abcont4-cont">
                 <p class="ab-tit5"><span>OOOO</span></p>
                 <p class="ab-tit6">十多年专业项目工程经验</p>
                 <p class="ab-tit7">文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 文本介绍文本介绍文本介绍文本介绍 文本介绍文本介绍文本</p>
             </div>
              <div class="img"><img src="../../img/abimg4.png"></div>
            </div>
            <div class="abcont4-con3">
             <div class="abcont4-cont">
                 <p class="ab-tit5"><span>公司创OO</span></p>
                 <p class="ab-tit6">十多年专业项目工程经验</p>
                 <p class="ab-tit7">文本介绍文本介绍文本介绍文本介绍文本介绍文本介绍文本介 文本介绍文本介绍文本介绍文本介绍 文本介绍文本介绍文本</p>
             </div>
             <div class="img"><img src="../../img/abimg5.png"></div>
            </div>
         </div>
    </div>
    <div class="abcont5">
        <h2Title title1='Cultural' title2='文化宗旨'></h2Title>
         <div class="abcont5-con con">
             <div class="abcont5-con1">
                 <p class="psty3">&mdash;&mdash;&mdash;&emsp;&emsp;企业精神 - 不断超越，追求完美</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
             </div>
             <img src="../../img/abimg8.png">
         </div>
         <div class="abcont5-con con">
            <img src="../../img/abimg7.png">
            <div class="abcont5-con2">
                    <p class="psty3">企业精神 - 不断超越，追求完美&emsp;&emsp;&mdash;&mdash;&mdash;</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
            </div>
         </div>
    </div>
<foot></foot>
</div>
</template>
<script>
import h2Title from '../../components/h2Title'
import foot from '../../components/foot'
import {WOW} from 'wowjs'
export default {
    data:function(){
        return {
            list:'',
            description:'',
            logoimg:''
        }
    },
    components:{
        h2Title,
        foot
    },
    mounted(){
        new WOW().init()
        this.companyload()
    },
    methods:{
         companyload:function(){
            this.$axios.get('/api/about/list')
            .then((res) => {
              var i = 4
              this.description = res.data.list[i].description
              this.logoimg= res.data.list[i].logo_url
            })
    },
    }
}
</script>
<style lang="less">
.mb5{
    margin-bottom: 5px;
    }
.abimg1{
    overflow: hidden;
    img{
    background-position: center;
    }
    }
.abcont1{
    width: 1200px;
    border: solid 1px #cccccc;
    margin: -95px auto 0;
    position: relative;
    padding: 15px 25px;
    font-size: 24px;
    .abcont1-con{
    border: solid 1px #cccccc;
    background-color: #fff;
    padding-top: 35px;
    .abcont1-2{
    margin-top:40px;
    padding-bottom: 35px;
    .abcont1-2img{
        width: 407px;
        float: left;
        height: 318px;
        margin-left: 37px;
        margin-right: 42px;
        border-radius: 50px;
        background-color: white;
        border: 3px solid #6ed5a0;

    }
    img{
        // width: 200px;
        height: 200px;
        margin-top: 30px;
        margin-top: 60px;
        margin-left: -5px;
    }
    }
    }
    }
.abcont2l,.abcont2c,.abcont2r{
    text-align: center;
    }
.abcont2{padding-top: 30px !important;}
.ab-tit1{
    color: #666666;
    text-transform: uppercase;
    padding-bottom: 5px;
    font-size: 24px;
    }
.ab-tit2{
    font-weight: bold;
    font-size: 24px;
    position: relative;
    &::before,&::after{
    position: absolute;
    height: 1px;
    background-color:currentColor;
    content: '';
    }

    }
.abcont1-3{
    display: inline-block;
    width: 665px;
    line-height: 54px;
    padding-right: 35px;
    text-align: left;
    }
.abp-sty1{
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    height: 2px;
    background-color: #cccccc;
    position: relative;
    &::before{
    position: absolute;
    width: 230px;
    left: calc( 50% - 115px);
    height: 4px;
    background-color: #294cff;
    border-radius: 2px;
    content: '';
    top:-1px;
    }
    }
.abicon1{
    position: relative;
    &::before{
    position: absolute;
    content: '';
    width: 50px;
	height: 2px;
    background-color: #666666;
    left: calc( 50% - 25px);
    top:45px;
    }
    }
.abp-sty2{
    color: #999;
    font-size: 16px;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 30px;
}
.abcont2-1{display: flex;flex-direction: row;font-size: 16px;color: #fff;margin-top: 45px;}
.abcont2c{width: 580px;display: flex;flex-direction: row;flex-wrap:wrap}
.abcimg2,.abcimg3,.abcimg4,.abcimg5,.abcimg6{border-radius: 40px;}
.abcimg2,.abcimg4,.abcont2l,.abcont2c{margin-right: 15px;}
.abcimg2,.abcimg3{margin-bottom: 15px;}
.abcimg1{
    width: 356px;
	height: 296px;
	background-color: #ff7269;
    border-radius: 60px;
    .img{
        width: 84px;
        height: 82px;
        background-position: 0px 0px;
        margin-top: 85px;
        margin-bottom: 20px;
    }}
.abcimg2{
    width: 340px;
	height: 140px;
    background-color: #edc44e;
    .img{
        width: 70px;
        height: 50px;
        background-position: -90px 0px;
        margin-top: 28px;
        margin-bottom: 10px;
    }
    }
.abcimg3{
    width: 220px;
	height: 140px;
    background-color: #6ed5a0;
    .img{
        width: 50px;
        height: 50px;
        background-position: -159px 0px;
        margin-top: 28px;
        margin-bottom: 10px;
    }
    }
.abcimg4{
    width: 220px;
	height: 140px;
	background-color: #19adeb;
    .img{
        width: 50px;
        height: 48px;
        background-position: -210px 0px;
        margin-top: 28px;
        margin-bottom: 8px;
    }
    }
.abcimg5{
    width: 340px;
	height: 140px;
	background-color: #dc9f5c;
    .img{
        width: 46px;
        height: 50px;
        background-position: -272px 0px;
        margin-top: 28px;
        margin-bottom: 15px;
    }

    }
.abcimg6{
    width: 222px;
	height: 296px;
	background-color: #5cdcda;
    .img{
        width: 70px;
        height: 70px;
        display: inline-block;
        background-position:  -328px 0px;
        margin-top: 90px;
        margin-bottom: 20px;
    }
    }
.iconimg1{
        display: inline-block;
        background-image: url(../../img/iconimg1.png);
        background-repeat: no-repeat;
}
.abcont3{
    color: #fff;
    background: url(../../img/abimg2.jpg) no-repeat center;
    margin-top: 50px;
    padding-top: 50px;
       }
.abcont2 .h2-tit1,.abcont1 .h2-tit1{color: #666;}
.abcont3-1{display: flex;flex-flow: row;justify-content: space-evenly;padding-bottom: 60px;padding-top: 30px;}
.fz48{font-size: 48px;}
.fz28{font-size: 28px;}
.psty2{font-size: 16px;}
.abcont4-con{
img{
        margin-right: -25px;
    position: relative;
    z-index: 2;
}}
.abcont4-cont{border-radius: 40px;opacity: 0.9;}
.abcont4-cont{
    background-image: linear-gradient(180deg, #fea29c 0%, #fe5d8c 100%);
    box-shadow: 1px 2px 9px 1px rgba(36, 125, 255, 0.34);
    font-size: 16px;
    .abcont4-cont1{
    background-color: #ffffff;
	box-shadow: 1px 2px 9px 1px rgba(36, 125, 255, 0.34);
    border-radius: 40px;
    margin: 20px 40px;
    height: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
    }
}
.ab-tit5{
	font-size: 16px;
	font-weight: bold;
    color: #333333;
    padding-top: 35px;
    span{position: relative;
    padding-bottom: 15px;
    display: inline-block;}
    span::before{
        position:absolute;
        width: 60px;
        height: 1px;
        background-color: currentColor;
        margin-left: calc(50% - 30px);
        bottom: 0px;
        content: '';
    }
    }
.ab-tit6{
    padding-top: 20px;
    padding-bottom: 15px;
}
.abcont4-con2{
    .abcont4-cont{
        	background-image: linear-gradient(0deg,
		#04a8ff 0%,
		#27d6c7 100%);
	box-shadow: 1px 2px 9px 1px
		rgba(25, 173, 235, 0.34);
    }
    img{
    margin-left: -25px;
    margin-top: -50px;
}
.abcont4-cont{ width: 300px;padding-left: 20px;padding-right: 20px;}
}
.abcont4-con3{
    .abcont4-cont{	background-image: linear-gradient(180deg,
		#9edaff 0%,
		#8598fe 100%);
	box-shadow: 1px 2px 9px 1px
        rgba(134, 154, 254, 0.34);}
        img{
        margin-left: -25px;
}
.abcont4-cont{ width: 300px;padding-left: 20px;padding-right: 20px; }
}
.abcont4-con2{margin-right: 40px;}
.abcont4-con3{margin-right: 20px;}
.abcont4{margin-top: 80px !important;}
.abcont4-con{
    margin-top: 80px;
    margin-bottom: 80px;
    img{margin-top: -40px;}
    }
.abcont5{
    background: url(../../img/abimg6.jpg) no-repeat center;
    color: #FFF;
    padding-top: 60px;
    padding-bottom: 55px;
    font-size: 16px;
    .h1Title{margin-bottom: 35px;}



    }
.abcont5-con,.abcont4-con3,.abcont4-con2,.abcont4-con{display: flex;flex-flow: row;}
.abcont5-con2{margin-left: 40px;}
.abcont5-con1{margin-right: 40px;}
.abcont5-con{
    p{text-transform: uppercase;line-height: 1.8;text-align:left;}
    }
.psty3{padding-bottom: 15px;}
.abcont5-con2{padding-top: 30px;}

</style>
